<template>
    <div class="trip-container">
        <!-- 背景装饰 -->
        <div class="background-decoration">
            <div class="floating-shape shape-1"></div>
            <div class="floating-shape shape-2"></div>
            <div class="floating-shape shape-3"></div>
        </div>

        <el-card class="box-card modern-card">
            <template #header>
                <div class="card-header">
                    <div class="search-section">
                        <div class="search-group">
                            <el-input 
                                v-model="searchText" 
                                placeholder="搜索项目名称、人员..." 
                                class="search-input"
                                clearable 
                                @clear="handleSearchClear" 
                                @keyup.enter="handleSearch">
                                <template #prefix>
                                    <el-icon><Search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <div class="filter-group">
                            <el-date-picker 
                                v-model="selectedMonth" 
                                type="month" 
                                placeholder="选择月份"
                                class="date-picker"
                                value-format="YYYY-MM" 
                                @change="handleMonthChange"
                                clearable />
                        </div>
                    </div>
                    <div class="action-section">
                        <el-button type="primary" @click="handleAdd" class="action-btn primary-btn">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增出差记录
                        </el-button>
                        <el-button type="success" @click="exportExcel" class="action-btn success-btn">
                            <el-icon>
                                <Document />
                            </el-icon>
                            导出Excel
                        </el-button>
                    </div>
                </div>
            </template>

            <div class="table-container">
                <el-table 
                    :data="filteredTableData" 
                    border 
                    v-loading="loading" 
                    stripe 
                    highlight-current-row
                    size="default" 
                    row-key="ID"
                    class="responsive-table">
                    <el-table-column prop="itemName" label="项目名称" align="center" :show-overflow-tooltip="true" min-width="120">
                        <template #default="{ row }">
                            <div class="project-name">
                                <el-icon class="project-icon"><Briefcase /></el-icon>
                                <span>{{ row.itemName }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createAt" label="填写时间" align="center" width="120">
                        <template #default="{ row }">
                            <div class="date-cell">
                                <el-icon class="date-icon"><Calendar /></el-icon>
                                <span>{{ formatDate(row.createAt) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="填写人" align="center" width="100">
                        <template #default="{ row }">
                            <div class="user-cell">
                                <el-avatar :size="24" class="user-avatar">
                                    {{ row.userName?.charAt(0) }}
                                </el-avatar>
                                <span>{{ row.userName }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripNames" label="出差人员" align="center" :show-overflow-tooltip="true" min-width="120">
                        <template #default="{ row }">
                            <div class="trip-people">
                                <el-icon class="people-icon"><User /></el-icon>
                                <span>{{ row.tripNames }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripAddNames" label="陪同市场人员" align="center" :show-overflow-tooltip="true" min-width="120">
                        <template #default="{ row }">
                            <div class="market-people">
                                <el-icon v-if="row.tripAddNames && row.tripAddNames.trim()" class="market-icon"><UserFilled /></el-icon>
                                <span>{{ row.tripAddNames || '无' }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripAddr" label="出差地点" align="center" :show-overflow-tooltip="true" min-width="120">
                        <template #default="{ row }">
                            <div class="location-cell">
                                <el-icon class="location-icon"><Location /></el-icon>
                                <span>{{ row.tripAddr }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripBeginTime" label="开始时间" align="center" width="120">
                        <template #default="{ row }">
                            <div class="date-cell start-date">
                                <el-icon class="date-icon"><Timer /></el-icon>
                                <span>{{ formatDate(row.tripBeginTime) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripEndTime" label="结束时间" align="center" width="120">
                        <template #default="{ row }">
                            <div class="date-cell end-date">
                                <el-icon class="date-icon"><Timer /></el-icon>
                                <span>{{ formatDate(row.tripEndTime) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripDayCount" label="出差天数" align="center" width="100">
                        <template #default="{ row }">
                            <el-tag type="info" size="small" class="day-count-tag">
                                <el-icon><Clock /></el-icon>
                                {{ row.tripDayCount }} 天
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripObjective" label="出差目的" align="left" min-width="200" :show-overflow-tooltip="true">
                        <template #default="{ row }">
                            <div class="objective-cell">
                                <el-icon class="objective-icon"><Aim /></el-icon>
                                <span>{{ row.tripObjective }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tripVehicle" label="交通工具" align="center" width="100">
                        <template #default="{ row }">
                            <el-tag :type="getTransportTagType(row.tripVehicle)" size="small" class="vehicle-tag">
                                <el-icon class="vehicle-icon">
                                    <component :is="getVehicleIcon(row.tripVehicle)" />
                                </el-icon>
                                {{ row.tripVehicle }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center" width="150">
                        <template #default="{ row }">
                            <div class="action-buttons">
                                <el-button size="small" type="primary" @click="handleEdit(row)" class="edit-btn">
                                    <el-icon><Edit /></el-icon>
                                </el-button>
                                <el-button size="small" type="danger" @click="handleDelete(row)" class="delete-btn">
                                    <el-icon><Delete /></el-icon>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                
                <div class="pagination-wrapper">
                    <el-pagination 
                        v-model:current-page="currentPage" 
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]" 
                        :small="false" 
                        :background="true"
                        layout="total, sizes, prev, pager, next, jumper" 
                        :total="total" 
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </el-card>

        <el-dialog 
            v-model="dialogVisible" 
            :title="dialogTitle" 
            width="60%" 
            :close-on-click-modal="false"
            class="trip-dialog"
            :before-close="handleDialogClose">
            <div class="dialog-content">
                <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" label-position="right" class="trip-form">
                    <el-form-item label="项目名称" prop="itemId">
                        <el-select v-model="formData.itemId" filterable placeholder="请选择项目名称" style="width: 100%">
                            <el-option v-for="item in filteredProjects" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出差人员" prop="tripUUIDs">
                        <el-select v-model="formData.tripUUIDs" multiple filterable allow-create placeholder="请选择出差人员"
                            style="width: 100%">
                            <el-option v-for="person in staffList" :key="person.id" :label="person.name" :value="person.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="陪同市场人员" prop="tripAddNames">
                        <el-select v-model="formData.tripAddNames" multiple allow-create filterable placeholder="请选择陪同市场人员"
                            @remove-tag="handleRemoveTag" style="width: 100%">
                            <el-option v-for="person in staffList" :key="person.id" :label="person.name" :value="person.name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出差地点" prop="tripAddr">
                        <el-input v-model="formData.tripAddr" placeholder="请输入出差地点" />
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12">
                            <el-form-item label="开始时间" prop="tripBeginTime">
                                <el-date-picker v-model="formData.tripBeginTime" type="date" placeholder="选择开始时间"
                                    style="width: 100%" value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12">
                            <el-form-item label="结束时间" prop="tripEndTime">
                                <el-date-picker v-model="formData.tripEndTime" type="date" placeholder="选择结束时间"
                                    style="width: 100%" value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="出差目的" prop="tripObjective">
                        <el-input v-model="formData.tripObjective" type="textarea" :rows="3" placeholder="请输入出差目的" />
                    </el-form-item>
                    <el-form-item label="交通工具" prop="tripVehicle">
                        <el-select v-model="formData.tripVehicle" placeholder="请选择交通工具" style="width: 100%">
                            <el-option v-for="item in transportationOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" class="confirm-btn">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { 
    Search, Plus, Document, Edit, Delete, 
    Briefcase, Calendar, User, UserFilled, Timer, Clock, 
    Aim, Van, Ship, Place, Position 
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    GetItemList, //获取所有项目
    GetGetOnlineTaskGuarantors,//获取所有人
    CreateTrip,//创建出差记录
    UpdateTrip,//修改出差记录
    GetTripList,//查询出差记录
    ExportReportTrip,//导出出差记录
    DeleteTrip,//删除出差记录
} from "@/api/newDemands/index";
import dayjs from 'dayjs'

interface BusinessTripRecord {
    ID?: number
    id?: string
    itemId: number
    tripUUIDs: string[]
    tripAddNames: string[]
    tripAddr: string
    tripBeginTime: string
    tripEndTime: string
    tripObjective: string
    tripVehicle: string
}

interface Staff {
    id: string
    name: string
}

interface Project {
    value: number
    label: string
}

const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('新增出差记录')
const formRef = ref<FormInstance>()
const formData = ref<BusinessTripRecord>({
    itemId: 23,
    tripUUIDs: [],
    tripAddNames: [],
    tripAddr: '',
    tripBeginTime: '',
    tripEndTime: '',
    tripObjective: '',
    tripVehicle: '',
})

const filteredProjects = ref<Project[]>([])
const formRules: FormRules = {
    itemId: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
    ],
    tripUUIDs: [
        { required: true, message: '请选择出差人员', trigger: 'change' }
    ],
    tripAddr: [
        { required: true, message: '请输入出差地点', trigger: 'blur' }
    ],
    tripBeginTime: [
        { required: true, message: '请选择开始时间', trigger: 'change' }
    ],
    tripEndTime: [
        { required: true, message: '请选择结束时间', trigger: 'change' },
        {
            validator: (_, value, callback) => {
                if (!value) {
                    callback(new Error('请选择结束时间'))
                } else if (dayjs(value).isBefore(dayjs(formData.value.tripBeginTime))) {
                    callback(new Error('结束时间不能早于开始时间'))
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ]
}

const transportationOptions = [
    { value: '高铁', label: '高铁' },
    { value: '火车', label: '火车' },
    { value: '汽车', label: '汽车' },
    { value: '自驾', label: '自驾' },
    { value: '飞机', label: '飞机' },
    { value: '其他', label: '其他' }
]

const formatDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD')
}

const getTransportTagType = (transport: string) => {
    const map: Record<string, any> = {
        '飞机': 'success',
        '高铁': '',
        '汽车': 'info',
        '自驾': 'warning',
        '其他': 'danger'
    }
    return map[transport] || ''
}

const handleSearch = () => {
    currentPage.value = 1
    getTripList();
}

const handleSearchClear = () => {
    searchText.value = ''
    currentPage.value = 1
    getTripList();
}

const handleMonthChange = () => {
    currentPage.value = 1
    getTripList();
}



// 新增出差记录弹框
const handleAdd = () => {
    dialogTitle.value = '新增出差记录'
    formData.value = {
        itemId: 23,
        tripUUIDs: [],
        tripAddNames: [],
        tripAddr: '',
        tripBeginTime: '',
        tripEndTime: '',
        tripObjective: '',
        tripVehicle: '',
    }
    // 获取所有项目
    getItemList();
    // 获取所有用户
    getAllUsers();
    dialogVisible.value = true
}

const handleEdit = (row: any) => {
    console.log(row)
    // 获取所有项目
    getItemList();
    // 获取所有用户
    getAllUsers();
    dialogTitle.value = '编辑出差记录'
    const tripUUIDsArray = row.tripUUIDs ? row.tripUUIDs.split('|') : []
    const tripAddNamesArray = row.tripAddNames ? row.tripAddNames.split('|') : []

    formData.value = {
        ...row,
        itemId: row.itemId,
        tripUUIDs: tripUUIDsArray,  // 使用处理后的数组
        tripAddNames: tripAddNamesArray,
    }
    dialogVisible.value = true
}

const handleDelete = (row: BusinessTripRecord) => {
    console.log(row)
    ElMessageBox.confirm('确定要删除这条出差记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteTrip(row.ID as number);
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}
// 删除出差记录
const deleteTrip = async (id: number) => {
    const { data } = await DeleteTrip(id);
    if (data.code == 200) {
        ElMessage.success(data.msg)
        getTripList();
    } else {
        ElMessage.error(data.msg)
    }
}


const handleRemoveTag = (tag: string) => {
    console.log(tag)
    // 确保数组更新
    formData.value.tripAddNames = formData.value.tripAddNames.filter(id => id !== tag)
}



const handleSubmit = async () => {
    if (!formRef.value) return
    try {
        await formRef.value.validate()

        if (dialogTitle.value === '新增出差记录') {
            createTrip();//新建出差记录
        } else {
            updateTrip();//编辑出差记录
        }
        dialogVisible.value = false
    } catch (error) {
        console.error('表单验证失败', error)
    }
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getTripList();
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getTripList();
}

// 创建出差记录
const createTrip = async () => {
    const { data } = await CreateTrip(formData.value)
    if (data.code == 200) {
        ElMessage.success(data.msg);
        dialogVisible.value = false;
        getTripList();
    } else {
        ElMessage.error(data.msg);
    }
}
// 修改出差记录
const updateTrip = async () => {
    console.log(formData.value)
    const { data } = await UpdateTrip(formData.value)
    if (data.code == 200) {
        ElMessage.success(data.msg);
        dialogVisible.value = false;
        getTripList();
    } else {
        ElMessage.error(data.msg);
    }
}


// 查询出差记录
const filteredTableData = ref();
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(10)
const searchText = ref('')
const selectedMonth = ref(dayjs().format('YYYY-MM'))
const getTripList = async () => {
    const { data } = await GetTripList({
        "page": currentPage.value,
        "pageSize": pageSize.value,
        "keyword": searchText.value,
        "tripTime": selectedMonth.value,
    });

    if (data.code == 200) {
        filteredTableData.value = data.data.list;
        total.value = data.data.total;
    } else {
        ElMessage.error(data.msg)
    }
}

// 导出Excel数据
const exportExcel = async () => {
    try {
        const response = await ExportReportTrip({
            page: currentPage.value,
            pageSize: pageSize.value,
            keyword: searchText.value,
            tripTime: selectedMonth.value,
        });

        // 从响应头获取文件名
        const contentDisposition = response.headers['content-disposition'];
        let fileName = '出差记录.xlsx'; // 默认文件名

        if (contentDisposition) {
            // 处理可能的中文文件名（后端需要做URL编码）
            const fileNameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i);
            if (fileNameMatch && fileNameMatch.length > 1) {
                fileName = decodeURIComponent(fileNameMatch[1]);
            }
        }

        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);

    } catch (error) {
        console.error('导出失败:', error);
    }
};



// 获取所有项目
const getItemList = async () => {
    const { data } = await GetItemList()
    if (data.code == 200) {
        filteredProjects.value = data.data.map((item: any) => ({
            value: item.ID,
            label: item.itemName,
        }))
    } else {
        ElMessage.error(data.msg)
    }
}
// 获取所有用户
const staffList = ref<Staff[]>()
const getAllUsers = async () => {
    const { data } = await GetGetOnlineTaskGuarantors()
    if (data.code == 200) {
        staffList.value = data.data.map((item: any) => ({
            id: item.uuid,
            name: item.userName,
        }))
    } else {
        ElMessage.error(data.msg)
    }
}

const handleDialogClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭？未保存的数据将会丢失')
        .then(() => {
            done()
        })
        .catch(() => {
            // 取消关闭
        })
}

onMounted(() => {
    getTripList();
})

const getVehicleIcon = (vehicle: string) => {
    const iconMap: Record<string, any> = {
        '飞机': Place,
        '高铁': Position,
        '火车': Position,
        '汽车': Van,
        '自驾': Van,
        '轮船': Ship,
        '其他': Van
    }
    return iconMap[vehicle] || Van
}
</script>

<style scoped>
.trip-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.background-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.modern-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: none;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.search-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.action-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px 16px;
    border: none;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

.primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
}

.success-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.success-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.6);
}

.search-group, .filter-group {
    position: relative;
}

.search-input {
    width: 280px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-input :deep(.el-input__wrapper:hover) {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.date-picker {
    width: 200px;
    border-radius: 12px;
}

.date-picker :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    height: 100%;
}



.responsive-table {
    flex: 1;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.responsive-table :deep(.el-table__body-wrapper) {
    overflow-y: auto;
    max-height: calc(80vh - 120px);
    flex: 1;
}

.responsive-table :deep(.el-table__header-wrapper) {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    flex-shrink: 0;
}

.responsive-table :deep(.el-table__header) {
    background: transparent;
}

.responsive-table :deep(.el-table__header th) {
    background: transparent;
    color: #374151;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
    padding: 12px 0;
    height: 44px;
    vertical-align: middle;
}

/* 表头文字对齐方式 */
.responsive-table :deep(.el-table__header th:nth-child(1)) { text-align: center; }  /* 项目名称 */
.responsive-table :deep(.el-table__header th:nth-child(2)) { text-align: center; }  /* 填写时间 */
.responsive-table :deep(.el-table__header th:nth-child(3)) { text-align: center; }  /* 填写人 */
.responsive-table :deep(.el-table__header th:nth-child(4)) { text-align: center; }  /* 出差人员 */
.responsive-table :deep(.el-table__header th:nth-child(5)) { text-align: center; }  /* 陪同市场人员 */
.responsive-table :deep(.el-table__header th:nth-child(6)) { text-align: center; }  /* 出差地点 */
.responsive-table :deep(.el-table__header th:nth-child(7)) { text-align: center; }  /* 开始时间 */
.responsive-table :deep(.el-table__header th:nth-child(8)) { text-align: center; }  /* 结束时间 */
.responsive-table :deep(.el-table__header th:nth-child(9)) { text-align: center; }  /* 出差天数 */
.responsive-table :deep(.el-table__header th:nth-child(10)) { text-align: left; }   /* 出差目的 */
.responsive-table :deep(.el-table__header th:nth-child(11)) { text-align: center; } /* 交通工具 */
.responsive-table :deep(.el-table__header th:nth-child(12)) { text-align: center; } /* 操作 */

.project-name, .date-cell, .user-cell, .trip-people, .market-people, .location-cell, .objective-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.project-icon, .date-icon, .people-icon, .market-icon, .location-icon, .objective-icon {
    font-size: 14px;
    color: #667eea;
}

.user-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

.start-date .date-icon {
    color: #10b981;
}

.end-date .date-icon {
    color: #ef4444;
}

.day-count-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    font-weight: 500;
}

.vehicle-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    font-weight: 500;
}

.vehicle-icon {
    font-size: 12px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.edit-btn, .delete-btn {
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.edit-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.edit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.delete-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.delete-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.pagination-wrapper {
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border-top: 2px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: 50px;
    flex-shrink: 0;
}

.trip-dialog :deep(.el-dialog) {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.trip-dialog :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px 32px;
    position: relative;
}

.trip-dialog :deep(.el-dialog__header)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.trip-dialog :deep(.el-dialog__title) {
    color: white;
    font-weight: 700;
    font-size: 18px;
}

.trip-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
    font-size: 20px;
}

.dialog-content {
    padding: 32px;
    background: #fafbfc;
}

.trip-form {
    padding: 0;
}

.trip-form :deep(.el-form-item__label) {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.trip-form :deep(.el-input__wrapper),
.trip-form :deep(.el-textarea__inner),
.trip-form :deep(.el-select .el-input__wrapper) {
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.8);
}

.trip-form :deep(.el-input__wrapper:hover),
.trip-form :deep(.el-textarea__inner:hover),
.trip-form :deep(.el-select .el-input__wrapper:hover) {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.trip-form :deep(.el-input__wrapper.is-focus),
.trip-form :deep(.el-textarea__inner:focus),
.trip-form :deep(.el-select .el-input__wrapper.is-focus) {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px 32px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.cancel-btn, .confirm-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cancel-btn {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.cancel-btn:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

.confirm-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}



/* 滚动条样式 */
.responsive-table :deep(.el-table__body-wrapper)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.responsive-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.responsive-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 4px;
}

.responsive-table :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* 表格行高度和悬停效果 */
.responsive-table :deep(.el-table__row) {
    height: 48px;
}

.responsive-table :deep(.el-table__row:hover) {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.responsive-table :deep(.el-table__body td) {
    padding: 12px 0;
    vertical-align: middle;
}

/* 表格数据对齐方式 */
.responsive-table :deep(.el-table__body tr td:nth-child(1)) { text-align: center; }  /* 项目名称 */
.responsive-table :deep(.el-table__body tr td:nth-child(2)) { text-align: center; }  /* 填写时间 */
.responsive-table :deep(.el-table__body tr td:nth-child(3)) { text-align: center; }  /* 填写人 */
.responsive-table :deep(.el-table__body tr td:nth-child(4)) { text-align: center; }  /* 出差人员 */
.responsive-table :deep(.el-table__body tr td:nth-child(5)) { text-align: center; }  /* 陪同市场人员 */
.responsive-table :deep(.el-table__body tr td:nth-child(6)) { text-align: center; }  /* 出差地点 */
.responsive-table :deep(.el-table__body tr td:nth-child(7)) { text-align: center; }  /* 开始时间 */
.responsive-table :deep(.el-table__body tr td:nth-child(8)) { text-align: center; }  /* 结束时间 */
.responsive-table :deep(.el-table__body tr td:nth-child(9)) { text-align: center; }  /* 出差天数 */
.responsive-table :deep(.el-table__body tr td:nth-child(10)) { text-align: left; }   /* 出差目的 */
.responsive-table :deep(.el-table__body tr td:nth-child(11)) { text-align: center; } /* 交通工具 */
.responsive-table :deep(.el-table__body tr td:nth-child(12)) { text-align: center; } /* 操作 */

/* 加载状态优化 */
.responsive-table :deep(.el-loading-mask) {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 12px;
}

.responsive-table :deep(.el-loading-spinner) {
    color: #667eea;
}

.responsive-table :deep(.el-loading-spinner .path) {
    stroke: #667eea;
    stroke-width: 3;
    stroke-linecap: round;
    animation: loading-dash 1.5s ease-in-out infinite;
}

.responsive-table :deep(.el-loading-spinner .el-loading-text) {
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* 加载遮罩层动画 */
.responsive-table :deep(.el-loading-mask) {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 加载完成后的淡出效果 */
.responsive-table :deep(.el-loading-mask.el-loading-fade-leave-active) {
    transition: all 0.3s ease-in;
}

.responsive-table :deep(.el-loading-mask.el-loading-fade-leave-to) {
    opacity: 0;
    transform: scale(1.05);
}

/* 空状态优化 */
.responsive-table :deep(.el-table__empty-block) {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.responsive-table :deep(.el-table__empty-text) {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modern-card {
    animation: fadeInUp 0.6s ease-out;
}



/* 主题色彩变量 */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --info-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 高级动画效果 */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* 增强的悬停效果 */
.action-btn:hover {
    animation: pulse 0.6s ease-in-out;
}



/* 表格行进入动画 */
.responsive-table :deep(.el-table__row) {
    animation: fadeInUp 0.4s ease-out;
    animation-fill-mode: both;
}

.responsive-table :deep(.el-table__row:nth-child(1)) { animation-delay: 0.05s; }
.responsive-table :deep(.el-table__row:nth-child(2)) { animation-delay: 0.1s; }
.responsive-table :deep(.el-table__row:nth-child(3)) { animation-delay: 0.15s; }
.responsive-table :deep(.el-table__row:nth-child(4)) { animation-delay: 0.2s; }
.responsive-table :deep(.el-table__row:nth-child(5)) { animation-delay: 0.25s; }
.responsive-table :deep(.el-table__row:nth-child(6)) { animation-delay: 0.3s; }
.responsive-table :deep(.el-table__row:nth-child(7)) { animation-delay: 0.35s; }
.responsive-table :deep(.el-table__row:nth-child(8)) { animation-delay: 0.4s; }
.responsive-table :deep(.el-table__row:nth-child(9)) { animation-delay: 0.45s; }
.responsive-table :deep(.el-table__row:nth-child(10)) { animation-delay: 0.5s; }

/* 玻璃态效果增强 */
.modern-card {
    backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 按钮光效 */
.action-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.action-btn:hover::after {
    left: 100%;
}



/* 表格单元格增强 */
.project-name, .date-cell, .user-cell, .trip-people, .market-people, .location-cell {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.objective-cell {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-left: 8px;
}

.market-people {
    min-height: 20px;
}

.market-people .market-icon {
    flex-shrink: 0;
}

.project-name:hover, .date-cell:hover, .user-cell:hover, .trip-people:hover, .market-people:hover, .location-cell:hover, .objective-cell:hover {
    transform: translateX(4px);
    color: #667eea;
}

/* 加载动画增强 */
.responsive-table :deep(.el-loading-spinner .path) {
    stroke: #667eea;
    stroke-width: 3;
}

/* 分页器增强 */
.pagination-wrapper :deep(.el-pagination) {
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-right: 0;
}

.pagination-wrapper :deep(.el-pagination .el-pager li) {
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 2px;
    font-weight: 500;
}

.pagination-wrapper :deep(.el-pagination .el-pager li:hover) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.pagination-wrapper :deep(.el-pagination .el-pager li.is-active) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pagination-wrapper :deep(.el-pagination .btn-prev),
.pagination-wrapper :deep(.el-pagination .btn-next) {
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 4px;
}

.pagination-wrapper :deep(.el-pagination .btn-prev:hover),
.pagination-wrapper :deep(.el-pagination .btn-next:hover) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 对话框增强 */
.trip-dialog :deep(.el-dialog__body) {
    background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
}

/* 表单输入框增强 */
.trip-form :deep(.el-input__wrapper) {
    position: relative;
    overflow: hidden;
}

.trip-form :deep(.el-input__wrapper::before) {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.trip-form :deep(.el-input__wrapper.is-focus::before) {
    width: 100%;
}












</style>
